<template>
  <el-dialog
    class="icon-dialog"
    :visible.sync="visible"
    v-if="visible"
    width="980px"
    top="8vh"
    :modal-append-to-body="false"
  >
    <div slot="title">
      选择图标
      <el-input
        v-model="input"
        size="mini"
        :style="{ width: '260px' }"
        placeholder="请输入图标名称"
        prefix-icon="el-icon-search"
        clearable
        @input="handleSearch"
      />
    </div>
    <el-row class="icon-ul">
      <el-col
        :span="4"
        v-for="icon in iconList"
        :key="icon"
        :class="active === icon ? 'active-item' : ''"
      >
        <div @click="onSelect(icon)">
          <i :class="icon"></i>
          {{ icon }}
        </div>
      </el-col>
    </el-row>
  </el-dialog>
</template>
<script>
import { iconFontList } from "../utils/iconData";

export default {
  model: {
    prop: "value", // 绑定的值，通过父组件传递
    event: "update",
  },
  props: {
    value: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      visible: false,
      iconList: iconFontList,
      active: null,
      input: "",
    };
  },

  methods: {
    onOpen() {
      this.active = this.value;
      this.iconList = iconFontList;
      this.visible = true;
    },
    onSelect(icon) {
      this.active = icon;
      this.$emit("select", icon);
      this.$emit("update", icon);
      this.visible = false;
    },
    handleSearch() {
      this.iconList = iconFontList.filter(
        (icon) => icon.indexOf(this.input) > -1
      );
    },
  },
};
</script>
<style lang="scss">
@import "../styles/generator.scss";

.icon-dialog {
  overflow: hidden;
  .icon-ul {
    .el-col {
      > div {
        cursor: pointer;
        height: 108px;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        i {
          font-size: 28px;
          margin-bottom: 10px;
        }
      }

      &:hover {
        background: #f2f2f2;
      }
      &.active-item {
        background: #e1f3fb;
        color: $themeColor;
      }
      > i {
        font-size: 30px;
        line-height: 50px;
      }
    }
  }
  .el-dialog__header {
    padding-top: 14px;
  }
  .el-dialog__body {
    height: 80vh;
    margin: 0 20px 20px 20px;
    padding: 0;
    overflow: auto;
  }
}
</style>
